<template>
  <div class="common-layout">
    <el-container class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item @click="goBack" style="cursor: pointer">返回</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type === '1'">新闻详情</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type === '2'">公告详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="news-info">
        <h3 class="title">{{ policyNewInfo.title }}</h3>
        <p class="date">发布日期:{{ policyNewInfo.createTime }}</p>
        <div class="content" v-html="policyNewInfo.content"></div>
        <div class="source">来源:{{ policyNewInfo.source }}</div>
      </el-card>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { PolicyNewApi } from '@/api/dbit/policynew'
import { NoticeInfoApi } from '@/api/dbit/noticeinfo'
import { format } from 'date-fns'

const route = useRoute()
const router = useRouter()
const newId = ref(route.query.id) // 新闻id
const type = ref(route.query.type)
const policyNewInfo = ref({
  content: '',
  createTime: '',
  id: 0,
  source: '',
  title: ''
})

/*获取新闻详情*/
const getNewInfo = async () => {
  if (type.value === '1') {
    // 请求接口
    const res = await PolicyNewApi.getPolicyNew(newId.value)
    res.createTime = format(new Date(res.createTime), 'yyyy-MM-dd')
    policyNewInfo.value = res
  }
  if (type.value === '2') {
    // 请求接口
    const res = await NoticeInfoApi.getNoticeInfo(newId.value)
    res.createTime = format(new Date(res.createTime), 'yyyy-MM-dd')
    policyNewInfo.value = res
  }
}

function goBack() {
  router.back()
}
onMounted(() => {
  getNewInfo()
})
</script>
<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.news-info {
  margin-top: 20px;
  min-height: 700px;
}

.news-info .title {
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.news-info .date {
  color: #86909c;
  font-size: 14px;
  margin: 16px 0 32px;
  text-align: center;
}

.news-info .source {
  text-align: right;
  margin: 50px 0;
}
</style>
